<template>
  <div>
    <el-card shadow="always">
      <el-row :gutter="12">
        <el-col :span="12">
          <span>开场白</span>：
          <el-button type="danger" v-if="isUpdate" class="min-work float-right" @click="cancelUpdate">取消</el-button>
          <el-button type="primary" v-if="!isUpdate" class="min-work float-right" @click="updateInput()">编辑</el-button>
          <el-button type="primary" v-if="isUpdate" class="min-work float-right" @click="updateDetail">保存</el-button>
        </el-col>
      </el-row>
      <el-row class="row-margin"></el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <div>
            <el-form :model="info" ref="saveChn" label-width="65px" size="mini">
              <el-form-item v-if="!isUpdate">
                <el-input v-if="info.prologue=$store.state.user.userinfo.prologue" :rows="4" :disabled="!isUpdate"
                          v-model="info.prologue" type="textarea" placeholder="请输入开场白">
                </el-input>
              </el-form-item>
              <el-form-item v-else>
                <el-input v-model="info.prologue" id="prologue" :disabled="!isUpdate" :rows="4" type="textarea"
                          placeholder="请输入开场白">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="always">
      <el-row :gutter="12">
        <el-col :span="12">
          <span>暂离设置</span>：
          <el-button type="danger" v-if="isUpdateLeave" class="min-work float-right" @click="cancelUpdateLeave">取消
          </el-button>
          <el-button type="primary" v-if="!isUpdateLeave" class="min-work float-right" @click="updateInputLeave()">编辑
          </el-button>
          <el-button type="primary" v-if="isUpdateLeave" class="min-work float-right" @click="updateDetailLeave">保存
          </el-button>
        </el-col>
      </el-row>
      <el-row class="row-margin"></el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <div>
            <el-form :model="info" label-width="65px" size="mini">
              <el-form-item v-if="leaving_time">
                <span>接收新消息后</span>
                <el-input :value="im_leaving_time/60" @input="handleimLeavingTime" :disabled="!isUpdateLeave"
                          style="width: 108px"></el-input>
                <span>分钟未读自动暂离</span>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <el-row type="flex" class="row-bg btn-row">
        <el-col :span="10"><span>快捷回复</span><span style="font-size: 12px;color: #8c939d">(设置后可在聊天中快速回复，最多设置5个)</span>
        </el-col>
        <el-col :span="14">
          <el-button style="float: right;" size="mini" @click="add" type="primary" icon="el-icon-plus">
            添加快捷回复
          </el-button>
        </el-col>
      </el-row>
      <div>
        <el-table :data="listData.items" v-loading.body="listLoading" size="mini" stripe
                  border fit
                  highlight-current-row>
          <el-table-column prop="id" label="ID" width="80" fixed="left"></el-table-column>
          <el-table-column prop="title" label='标题' width="150"></el-table-column>
          <el-table-column prop="content" label='内容' width="370"></el-table-column>
          <el-table-column prop="created_at" label='创建时间' width="180"></el-table-column>
          <el-table-column prop="updated_at" label='修改时间' width="180"></el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
                <el-button type="warning" size="mini" @click="deleteData(scope.row)">删除</el-button>

              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                         :page-size="q.page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="listData.total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :Detail="Detail"
    ></save-update>
  </div>
</template>

<script>
  import {updateAgencyMenber, getQuickReplyList, deleteQuickReplyById} from '@/api/index'
  import saveUpdate from './saveUpdate'

  export default {
    components: {saveUpdate},
    data() {
      return {
        showUpdate: false,
        show_id: null,
        isUpdate: false,
        info: {prologue: false},
        listData: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
        Timetype: true,
        ReChargeStatus: this.$store.state.app.ReChargeStatus,
        Detail: {},
        isUpdateLeave: false,
        im_leaving_time:null
      }
    },
    created() {
      this.getList()
    },
    computed: {
      leaving_time() {
        this.im_leaving_time  = this.$store.state.user.userinfo.im_leaving_time
        return this.$store.state.user.userinfo.im_leaving_time
      }
    },
    methods: {
      handleimLeavingTime(val){
        this.im_leaving_time = val * 60;
      },
      getMenberInfo() {
        this.$store.dispatch('GetInfo')
      },
      cancelUpdate() {
        this.isUpdate = false;
        this.info.prologue = false;
        this.getMenberInfo()
      },
      updateInput() {
        this.isUpdate = true;
      },
      updateDetail() {
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            updateAgencyMenber(this.info).then(res => {
              if (res.status === 0) {
                this.$message({message: '编辑成功。', type: 'success'})
                this.getMenberInfo()
                this.isUpdate = false;
              }
            })
          }
        })
      },
      cancelUpdateLeave() {
        this.isUpdateLeave = false
        this.im_leaving_time = this.$store.state.user.userinfo.im_leaving_time
      },
      updateInputLeave() {
        this.isUpdateLeave = true

      },
      updateDetailLeave() {
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            updateAgencyMenber({im_leaving_time: this.im_leaving_time}).then(res => {
              if (res.status === 0) {
                this.$message({message: '编辑成功。', type: 'success'})
                this.getMenberInfo()
                this.isUpdateLeave = false;
              }
            })
          }
        })
      },
      getList() {
        // this.q = queryFilter(this.q)
        getQuickReplyList(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
      add() {
        this.show_id = null
        this.Detail = {}
        this.showUpdate = true
      },
      deleteData(row) {
        this.$confirm(`确定删除ID：${row.id} 的快捷回复吗？`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteQuickReplyById(row.id).then(res => {
            if (res.status === 0) {
              this.$message({message: '删除成功', type: 'success'})
              this.getList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      update(row) {
        this.show_id = row.id
        this.Detail = {title: row.title, content: row.content}
        this.showUpdate = true
      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      },
      leaving_time(){
        this.im_leaving_time = this.leaving_time
      }
    }
  }
</script>
<style>
  .min-icon {
    padding: 2px 2px;
  }

  .title-span {
    width: 65px;
    display: inline-block;
  }

  .row-margin {
    margin: 2px;
  }

  .el-textarea.is-disabled .el-textarea__inner {
    background-color: white;
    color: black;
  }
</style>
